<script type="text/javascript" charset="utf-8" src="/public2/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="/public2/ueditor.all.min.js"> </script>
<!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
<!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
<script type="text/javascript" charset="utf-8" src="/public2/lang/zh-cn/zh-cn.js"></script>
<style>
    #add-container {
        height: 0px;
        overflow: hidden;
        transition: all .3s;
        padding-top: 10px;
    }
    input[type=file]{
        display: inline;
    }
</style>
<div class="main">
    <!-- MAIN CONTENT -->
    <div class="main-content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12">
                    <button class="btn btn-primary btn-block" id="add">新增</button>
                    <div id="add-container">
                        <div style="margin-bottom:10px;">
                            <span>封面图：</span>
                            <button type="button" id="file-label" class="btn btn-primary btn-sm">选择图片</button>
                            <input type="file" id="avatar" style="display:none"/>
                        </div>
                        <div id="img-container">
                            <img id="img" src="" alt="">
                        </div>
                        <div style="margin-bottom:10px;">
                            <span>标题：</span>
                            <input id="title" />
                        </div>
                        <script type="text/plain" id="myEditor" style="width:1000px;height:240px;">
                        </script>
                        <div class="input-container">
                            <button id="submit" class="btn btn-primary btn-block" style="width:1000px;margin-top:20px;">提交</button>
                        </div>
                    </div>
                    <div class="panel" style="margin-top:40px;">
                        <div class="panel-heading">
                            <h3 class="panel-title">当前项目</h3>
                        </div>
                        <div class="panel-body">
                            <table class="table table-striped">
                                <thead>
                                    <tr>
                                        <th>序号</th>
                                        <th>标题</th>
                                        <th>封面</th>
                                        <th>点赞数</th>
                                        <th>创建时间</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <% for(let i = 0; i < data.length; i++){ %>
                                        <tr>
                                            <td>
                                                <%= i+1%>
                                            </td>
                                            <td>
                                                <%= data[i].title%>
                                            </td>
                                            <td>
                                                <img src="<%= data[i].avatar%>" style="height: 100px;" alt="">
                                            </td>
                                            <td>
                                                <%= data[i].voteCount %>
                                            </td>
                                            <td>
                                                <%= data[i].createTime %>
                                            </td>
                                            <td>
                                                <a href="/admin/project/<%= data[i]._id%>">编辑</a>
                                                <a style="margin-left:10px" href="javascript:void(0)" onclick="delProject('<%= data[i]._id%>')">删除</a>
                                            </td>
                                        </tr>
                                        <% } %>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    //实例化编辑器
    var file;
    var um = UE.getEditor('myEditor');
    $('#avatar').on('change', function (e) {
        if (e.target.files[0]) {
            var reader = new FileReader();
            reader.onloadend = function () {
                file = reader.result;
                $('#img').attr('src', file);
            }
            reader.readAsDataURL(e.target.files[0]);
        }
    })
    $('#submit').on('click', function () {
        $.post('/admin/uploadProject', {
            title: $('#title').val() || '',
            avatar: file || '',
            content: um.getContent(),
        }, function (data) {
            if (data.status === 0) {
                history.go(0);
            } else {
                alert(JSON.stringify(data.message));
            }
        })
    });
    $('#add').on('click',function(e){
        if($('#add-container').height()===0){
            $('#add-container').height(700);
            $('#add').text('隐藏');
        }else{
            $('#add-container').height(0);
            $('#add').text('新增');
        }
    });
    $('#file-label').on('click',function(){
        $('#avatar').trigger('click');
    })
</script>